wat het verschil is tussen een blok html element en een inline html element;
welke sematische html elementen je moet gebruiken om je webpagina in te delen (lay-out html elementen);
hoe je een hele webpagina als onderdeel in een andere webpagina opneemt;
welk soort meta html elementen er bestaan en waarvoor je ze gebruikt;
Inhoud
Video
HTML attributen
Attributen worden gebruikt om tags extra functionaliteiten te geven. We hebben al kennis gemaakt met het lang attribuut. De waarde van het lang attribuut van het html element geeft aan in welke taal onze pagina is opgesteld. We stellen het lang attribuut in op nl voor webpagina's in het Nederlands:
<html lang="nl">
Grafische voorstelling van een HTML tag en zijn attribuut
Het class en het id attribuut gaan we veel gebruiken wanneer we CSS aan onze webpagina's gaan toevoegen.
altijd in de openingstag opgegeven;
met een spatie gescheiden van de tagnaam;
één tag kan meerdere attributen bevatten (met elk een bepaald kenmerk);
notatie: naam="waarde"
Een blok- en een inline-html element
Om elementen op een webpagina te kunnen plaatsen moet je in het verschil kennen tussen blok- en inline-elementen. Html elementen op een pagina kunnen zich op twee manieren gedragen:
Blok-elementen bezetten de gehele breedte van document. Een block element verdraagt geen tweede element op dezelfde regel of op hetzelfde horizontale niveau. Voorbeelden van blok-elementen zijn p, pre, blockquote, address, div, center, h1..h6, br, hr, ul, ol, li, dl, dt, dd, table en form.
Inline-elementen staan tussen de tekst of andere elementen, ze bezetten evenveel breedte als de breedte van hun inhoud. Inline elementen zijn elementen die dezelfde regel kunnen delen met andere elementen en niet vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel. Voorbeelden zijn a, img, font, span.
span, iframe, a zijn inline-elementen;
p, div zijn een blokelement;
h1, h2, h3, h4, h5 en h6 zijn blokekementen;
hr is een blokelement en tekent een lijn over de hele breedte van het scherm en sprint vervolgens naar de volgende lijn.
Als je een citaat wilt toevoegen aan je webpagina heb je de keuze tussen het q en het blockqoute html element. Het q element is een inline html element en het blockquote element is een block element. Het q element plaatst het citaat tussen de tekst en waar het staat en tussen enkelvoudige aanhalingstekens geplaatst. Het blockquote element plaatst het citaat als een blok, het citaat bezet de hele breedte van het scherm.
Voorbeeld:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline versus block</title>
</head>
<body>
<!-- inline css staat in de openingstag-->
<!-- -->
<h1 style="background-color: aqua;">Alle headings zijn blokelementen</h1>
<p style="background-color: bisque;">p elementen zijn ook blok elementen</p>
<a style="background-color: chartreuse;">ankers zijn inline elementen</a>
<a style="background-color: cornsilk;">nog een anker</a>
<div style="background-color: darkorange;">div elementen zijn blok elementen</div>
<span style="background-color: yellow;">span is een inline element</span>
<span style="background-color: darkorange;">nog een span</span>
<iframe src="https://modernways.be">
De homepagina van mijn pagina
</iframe>
<p style="background-color: aqua;">De <em>kat</em> krabt de <strong>krollen</strong> van de trap.</p>
<!-- hr is een blokelement en tekent een lijn over de hele breedte van het scherm en
gaat vervolgens naar de volgende lijn -->
<hr>
<blockquote>
<!-- De new lines die je zelf intypy worden in de browser niet getoond,
als je een new line wilt laten zien in de browser gebruik je de html tag <br> = line break -->
Wat
men
moet leren doen,<br>
leert men door het te doen. <cite> Bron: Aristoteles</cite>
</blockquote>
<p>De oud premier Jean-Luc Dehaene werd soms ook het <q>Brabants trekpaard</q>
genoemd of <q>de loodgieter</q> omdat hij naar eigen zeggen <q>problemen
pas oploste als ze zich voordeden</q>.</p>
</body>
</html>
We lopen hier een beetje vooruit op de leerstof. We gebruiken inline CSS om de achtergrondkleur van de html elementen in te stellen. We doen dat om het verschil tussen inline- en blokelementen te visualiseren.
Dit is het resultaat in de browser:
inline-vs-blok-elementen
Commentaar schrijven
In programmeertalen kan je commentaar toevoegen aan de broncode. Het commentaar wordt door de interpreter of compiler niet gebruikt bij het verwerken van de broncode. Ook HTML kan commentaar bevatten. Commentaar heeft als voornaamste doelstelling de werking van de broncode toe te lichten.
Commentaar in de code wordt door de browser niet uitgevoerd. Code wordt door de browser gelezen, commentaar is bedoeld voor de programmeur. Commentaar beschrijft hoe de code precies in mekaar steekt en maakt het gemakkelijker om code met andere programmeurs te delen en in de toekomst te bewerken.
<!-- Dit is commentaar -->
Emmet: ctrl /
Hierboven hebben we commentaar toegevoegd om uitleg te geven over inline CSS:
<!-- Inline css: staat tussen de html door gebruik te maken van het style attribuut -->
Semantische lay-out elementen
Het legt enkel de nadruk op de overeenkomst tussen de naam van het element en de inhoud ervan. Aan de inhoud van de elementen wordt een betekenisvolle naam gegeven.
De naam van een semantisch element drukt duidelijk zijn betekenis uit, zowel voor de ontwikkelaar als voor de browser.
Het div element
Dat element gebruik je als je verschillende andere html elementen in één blok-element wilt plaatsen.
Het span element
Dit element gebruik je om je tekst en eventueel inline elementen in 1 inline-element te groeperen.
meta html elementen
Metatags geven informatie over websites aan clients. Metatags staan bovenaan een HTML document en definiëren de basis kenmerken van een web pagina. Op "spider" gebaseerde zoekmachines gebruiken de metatags om websites te indexeren. Als je je bij een zoekmachine aanmeldt, zal deze je site meteen, of na een paar weken, bezoeken (spider of zoekrobot) en indexeren.
Het iframe element
Je gebruikt dit element om een hele webpagina in een andere webpagina op te nemen:
<iframe src="../labo1/oefening1.html"></iframe>
Hiermee toon je de oefening1.html in andere webpagina. Let op de URI. De twee punten (..) aan het begin geven aan dat de browserengine moet gaan in zoeken in de map die net boven de map staat waar de webpagina instaat en dan naar de map lab1 moet gaan en de oefening1.html bestand moet inladen.
Om een pagina van een andere website in je pagina te tonen geef je de volledige URL of URI op. Bijvoorbeeld om een pagina over html te tonen:
